/*格式化样式*/ body,embed,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;box-sizing: border-box ;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} a{text-decoration: none; color:#666666; zoom: 1;} caption,th {text-align:left} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0} input,select,textarea{ border: none; outline: none; background: none; } /* body{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } */ /* 滚动条隐藏 */ @media screen and (max-width: 768px) { ::-webkit-scrollbar{ display:none; } } div:focus { outline: none; } .main{ padding: 0 10%; margin: 0 auto; } *{ margin: 0; padding: 0; font-size: 16px; font-family: Microsoft YaHei; } html{ overflow-x: hidden; } .bgcolor{ background: #F7F7F7; } .active{ color: #E95016 !important; } .active1{ color: #E95016 !important; } .active2{ background: #E95016 !important; } .pull{ background-image: url(../img/pull2.png) !important; } .line{ position: absolute; width: 0; height: 3px !important; left: 0; bottom: 0; z-index: 4; transition: all .5s; width: 100% !important; background: #E95016 !important; } .spanbg{ background: #fff !important; } .current{ background: #E95016 !important; color: #fff !important; } .bg{ background: #333333 !important; } .banner .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom,.banner .swiper-pagination-fraction{ width: 14%; } .banner .swiper-pagination-bullet{ width: 0; height: 0; } .service .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom,.service .swiper-pagination-fraction{ width: 11%; } .service .swiper-pagination-bullet{ width: 0; height: 0; } /* header */ .header{ width: 100%; height: 96px; background: rgba(0, 0, 0, 0.04); z-index: 4; border-bottom:1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box; transition: all .5s; } .fixed{ position: fixed; top: 0; left: 0; } .navbg{ position: absolute; top: 0; left: 0; background:royalblue ; width: 100%; height: 0; } .headbox{ height: 100%; padding: 0 59px; display: flex; align-items: center; justify-content: flex-start } .headbox .logo{ width: 200px; margin-right: auto; } .headbox .logo a img{ object-fit: cover; vertical-align: middle; } .logow{ display: none; } .headbox .tel{ border-left: 1px solid rgba(255, 255, 255, 0.3); width: 229px; text-align: center; color: #FDFDFD; font-size: 14px; } .headbox .tel .number{ margin-top: 14px; font-size: 24px; } .navbox ul:first-child{ display: flex; justify-content: flex-start; } .navbox ul li{ font-size: 16px; line-height: 96px; padding: 0px 25px; z-index: 2; color: #FDFDFD; } .navbox li a { position: relative; display: block; color: #FFFFFF } .navbox li:hover>a{ color: #E95016; } .navbox li i { width:14px; height: 20px; display: inline-block; background: url(../img/pull.png) no-repeat center center; background-size: contain; vertical-align: middle; margin-left: 6px; transition:all .5s; } .navbox li:hover i{ transform: rotate(180deg); background: url(../img/pull2.png) no-repeat center center; } .navbox li em{ position: absolute; width: 0; height: 3px; left: 0; bottom: 0; z-index: 4; transition:all .5s; background: #E95016; } .navbox li:hover em{ width: 100%; } .navbox li .two{ width: 100%; height: 99px; background: rgba(0, 0, 0, 0.04); position: absolute; top: 96px; left: 0px; text-align: center; display: none; } .navbox .two a{ line-height: 99px; padding: 0 24px; color: #fff; display: inline-block; } .navbox li .two a:hover{ color: #E95016; } .header-btn{ background-size: 100%; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; /*margin-right: 20px;*/ display: none; } .header .menu li .menu-small{ position: absolute; top:38px; left: 0px; /*width:100%;*/ display: none; } .header .menu li .menu-small a{ display: block; background: #fff; line-height: 50px; padding: 0 14px; text-align: center; white-space: nowrap; color:#333; } /* .hidden-menu a.navToggle { padding: 17px 0; } */ .hidden-menu a { display: block; float: left; margin-left: 1px; background-repeat: no-repeat; } .hidden-menu a.navToggle span { width: 25px; height: 2px; background: #ffffff; /* background: #333; */ margin: 5px 0px; display: block; transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; position: relative; } .hidden-menu a.closenavbtn span.line1 { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top: 7px; } .hidden-menu a.closenavbtn span.line2 { display: none; } .hidden-menu a.closenavbtn span.line3 { transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 0px; } .header-list{ z-index: 999; clear: both; width: 100%; position: fixed; top:96px; display: none; left:0; overflow-x: hidden; overflow-y: auto; bottom: 0; background:#fff; } .header-list li{ border-top: 1px solid #eeeeee; width: 100%; line-height: 50px; } .header-list li:last-child{ border-bottom: 1px solid #eeeeee; } .header-list li a{ padding: 0 12px; display: block; } .header-list li>a.chil{ background: url(../img/pull2.png) no-repeat right 10px center; } .header-list li>a.cur{ /* color:#E95016; display:block; */ background:url(../img/pull1.png) no-repeat right 10px center; } .header-list li .menu-small{ background:#f5f5f5; display:none; } .header-list li .menu-small a{ border-bottom: solid 1px #ececec; display: block; padding: 8px 5%; line-height: 30px; font-size: 14px; color: #333; } .header-list li .menu-small a:last-child{ border:0; } /* .header-list li:hover{ background: #E95016; } .header-list li .menu-small a:hover{ background: #E95016; color: #ffffff; } .header-list li a:hover{ color: #ffffff !important; } */ /* banner */ .banner{ width: 100%; height: 100%; overflow: hidden; } .banner .swiper1 .swiper-slide img{ width: 100%; min-height: 400px; object-fit: cover; } .banner .swiper1 .swiper-slide a{ display: grid; } .banner .swiper_gn{ z-index: 2; position: absolute; left: 10%; bottom: 5%; display: flex; justify-content: flex-start; color: #ffffff; align-items: center; } .banner .swiper_gn .bannernext{ margin-left: 15px; cursor: pointer; } .banner .swiper_gn .title{ margin-left: 70px; width:200px; } /* numberbox */ .numberbox{ width: 100%; background: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); } .numberbox .main1{ display: flex; flex-wrap: wrap; } .numberbox .numberli{ margin: 34px 0 19px; border-right: 1px solid #EEEEEE; width: 25%; } .numberbox .numberli:nth-child(4){ border-right: 0; } .numberbox .numberli .message{ width: 100%; text-align: center; color: #333333; } .numberbox .numberli .message p{ height: 38px; line-height: 38px; margin-bottom: 20px; } .numberbox .numberli .messageh3{ font-size: 18px; } .numberbox .numberli .message span{ font-size: 48px; display: inline-block; } /* service */ .service{ padding-left: 10%; } .box_title{ margin-top: 8%; text-align: center; } .box_title .title1{ display: flex; align-items: center; justify-content: center; font-size: 38px; color: #333333; } .box_title .title1 .s1{ font-weight: bold; font-size: 38px; color: #CCCCCC; padding: 0 10px 20px; } .box_title .title1 .s2{ font-weight: bold; color: #E95016; font-size: 40px; } .box_title .title2{ margin-top: 23px; color: #999999; font-size: 16px; } .swiper2{ margin-top: 30px; position: relative; } .swiper2 .swiper-slide { margin-top: 60px; position: relative; } .swiper2 .swiper-slide img{ width: 100%; height: 568px; } .swiper2 .swiper-slide .message{ position: absolute; left: 0; top: 0; width:30%; height: 100%; padding: 0 3%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%); display: flex; flex-direction:column; } .swiper2 .swiper-slide .message .t1{ margin-top: 30%; font-size: 24px; color: #333333; } .swiper2 .swiper-slide .message .t1 span{ font-size: 30px; margin-right: 26px; font-weight: bold; } .swiper2 .swiper-slide .message .t2{ color: #666666; margin-top: 49px; font-size: 14px; } .swiper2 .swiper-slide .message img{ width: 32px; height: 32px; margin-top: 59px; } .pagination2{ z-index: 4; position: absolute; top: 0; left: 0; } .btn_po{ position: absolute; right: 5%; top: 0; width: 126px; display: flex; justify-content: space-between; height: 60px; align-items: center; z-index: 5; } /* .btn_po div:hover{ border-radius: 50%; background: #E95016 } */ .nextcl{ background: url('../img/nextcl.png') !important; } .prevcl{ background: url('../img/prevcl.png') !important; } .btn_po .sernext{ width: 40px; height: 40px; cursor: pointer; background: url('../img/right2.png'); } .btn_po .serprev{ width: 40px; height: 40px; cursor: pointer; background: url('../img/left2.png'); } .btn_po .serprev:hover{ background: url('../img/prevcl.png') !important; } .btn_po .sernext:hover{ background: url('../img/nextcl.png') !important; } .service .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ width: 10.8% !important; line-height: 60px; } .service .swiper-container-horizontal>.swiper-pagination-bullets,.service .swiper-pagination-custom,.service .swiper-pagination-fraction { width: 100% !important; height: 60px; overflow: hidden; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 !important; } .cases{ padding-bottom: 25px; border-bottom:1px solid #EEEEEE; } .cases .tab{ margin-top: 18px; width: 100%; padding:0 4%; display: flex; justify-content:center; } .cases .tab li{ padding:20px 0; width: 170px; text-align: center; margin-right:1%; background: #F9F9F9; font-size: 18px; color: #666666; margin-top: 10px; cursor:pointer; transition: .5s; } .cases .tab li:last-child{ margin-right: 0; } .cases .tab li:hover{ background: #E95016; color: #fff; } .work_box{ margin-top: 68px; padding: 0 15%; } .work_box1{ margin-top: 68px; padding: 0 5%; } .worklist{ display: flex; justify-content: space-between; flex-wrap: wrap; min-height:300px; } .worklist li{ width: 49%; /* margin-right: 2%; */ display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 10px; } .worklist1 li{ width: 32% !important; margin-right: 2%; display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 10px; } .worklist .caseItem{ position: relative; height: 335px; } .worklist li:nth-child(2n){ margin-right: 0; } .worklist li:nth-child(n+3){ margin-top: 36px; } .worklist1 li:nth-child(3n){ margin-right: 0 !important; } .worklist1 li:nth-child(2n){ margin-right: auto; } .worklist1 li:nth-child(n+3){ margin-top: 0px; } .worklist1 li:nth-child(n+4){ margin-top: 36px !important; } .worklist li .type1{ width: 100%; position: absolute; border-radius: 10px; } .worklist li .type1 img{ min-width: 300px; height: 306px; width: 100%; object-fit: cover; z-index: 1; filter: blur(0px); -webkit-filter: blur(0px); transition: all .7s; border-radius: 10px; } .worklist li .worktitle{ position: absolute; width: 100%; left: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 14px; color: #666666; z-index: -1; opacity: 1; } .worklist .type1 .worktitle{ opacity: 1; transition: all .5s; } .worklist .type1:hover+.worktitle{ opacity: 0; } .worklist li .worktitle p{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .worktitle1{ position: absolute; left: 0; top: 0; width: 100%; height: 335px; text-align: center; padding: 0 20%; background: rgba(0, 0, 0,0.5); color: #ffffff; transition: all 1s; border-radius: 10px; display: none; } .worktitle1 h3{ margin-top: 35%; font-size: 24px; } .worktitle1 .title{ font-size: 14px; margin-top: 33px; } .more{ width: 100%; text-align: center; margin-top: 30px; display: flex; justify-content: center; align-items: center; } .more a{ font-size: 18px; color: #333333; font-weight: bold; transform: all 1s; } .more:hover a{ color: #E95016; } .more span{ width:100px; height: 16px; margin-left: 20px; background-image: url('../img/right1.png'); background-repeat: no-repeat; background-size: 22px 16px; transition: all .5s; } .more:hover span{ margin-left: 50px; } .worklist li .type1:hover img{ height: 335px; border-radius: 6px; filter: blur(10px); -webkit-filter: blur(10px); transform: scale(1.2); } .worklist li .type1:hover .worktitle1{ display: block; } .new_box{ margin-top: 92px; margin-bottom: 107px; } .new_box .newlist{ display: flex; flex-wrap: wrap; padding: 0 10%; } .new_box .newlist li{ width: 30%; margin-right: 3%; height: 200px; } .new_box .newlist li:hover .box1{ transform: translateY(-20px); } .new_box .newlist li:nth-child(3n){ margin-right: 0; } .new_box .newlist li:nth-child(n+4){ margin-top: 100px; } .new_box .newlist li .box1{ display: flex; justify-content: space-around; height: 100%; transition: all .5s; } .new_box .newlist li .left{ height: 100%; width: 38%; display: flex; flex-direction: column; text-align: right; } .new_box .newlist li .left .date1{ font-size: 36px; color: #333333; margin-right: 9px; } .new_box .newlist li .left .date2{ margin-top: 18px; color: #333333; } .new_box .newlist li .right{ margin-left: 5%; height: 100%; width: 65%; display: flex; flex-direction: column; } .new_box .newlist li .right .title1{ width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 20px; color: #333; margin-top: 10px; } .new_box .newlist li:hover .right .title1,.new_box .newlist li:hover .left .date1{ color: #E95016; } .new_box .newlist li .right .title2{ margin-top: 45px; color: #999999; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; } .bar{ display: flex; flex-direction: column; align-items: center; padding: 6% 0 5%; width: 100%; background-image: url(../img/banner1.png) ; background-repeat: no-repeat; background-size: 100% 436px; text-align: center; } .bar h3{ font-size: 30px; color: #FFFFFF ; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; } .bar .t1{ font-size: 18px; color: #FFFFFF ; margin-top: 20px; } .bar .t2{ font-size: 16px; color: #FFFFFF ; margin-top: 15px; padding: 0 24% ; } .bar .bar_btn{ margin-top: 50px; display: flex; justify-content: center; width: 100%; } .bar .bar_btn .btn{ padding: 21px 28px; text-align: center; background: #FFFFFF; box-shadow: 0px 10px 14px 0px rgba(255, 255, 255, 0.5); border-radius: 34px; font-size: 24px; color: #FD4F00; } .bar .bar_btn .btn:nth-child(2){ margin-left: 10%; } .bar .bar_btn .btn:hover{ background: linear-gradient(266deg, rgba(233, 80, 22, 0.96), rgba(254, 196, 81, 0.96)); color: #ffffff; box-shadow: 6px 8px 14px 0px rgba(253, 79, 0, 0.5); } .processlist{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 105px 0 124px; } .processlist li{ width: 16.66666666%; } .time02 { -webkit-transition: all 0.2s ease-out; -khtml-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .processlist li .plist{ margin: 0 auto; width: 226px; height: 226px; display: flex; align-items: center; flex-direction: column; padding-top: 40px; position: relative; border-radius: 50%; position: relative } .processlist li .plist .bian{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border-radius: 50%; border-top: 1px solid #E5E5E5; border-left:1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #E5E5E5; transform: rotate(-45deg); display: none; } .processlist li .plist .bian1{ display: none; position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border-radius: 50%; border-top: 1px solid #E5E5E5; border-left:1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #E5E5E5; transform: rotate(45deg); z-index: 1; } .processlist li .plist:hover .bian{ transform: rotate(45deg); display: block; } .processlist li .plist .lefttop{ position: absolute; left: -30px; top: -60px; opacity: 0; font-size: 60px; color: #E5E5E5; } .processlist li .plist:hover .lefttop{ left: -5px; top: -30px; opacity: 1; } .processlist li .plist .rightbot{ position: absolute; right: -40px; bottom: -40px; opacity: 0; font-size: 60px; color: #E5E5E5; } .processlist li .plist:hover .rightbot{ right: -20px; bottom: -30px; opacity: 1; } .processlist li .plist img{ width: 60px; height: 60px; transition: all .5s; } .processlist li .plist .t1{ margin-top: 22px; font-size: 20px; text-align: center; } .processlist li .plist .t2{ margin-top: 19px; color: #999999; font-size: 14px; text-align: center; } .faqlist{ margin: 50px 0 110px; display: flex; flex-wrap: wrap; justify-content: space-around; } .faqlist li{ width: 24%; height: 122px; } .faqlist li:nth-child(n+5){ margin-top: 20px; } .faqlist li .flist{ border-radius: 4px; } .faqlist li .flist .problem{ width: 100%; height: 78px; line-height: 78px; text-align: center; color: #333333; font-size: 20px; transition: all 0.8s; } .faqlist li .flist .answer{ width: 100%; height: 44px; line-height: 44px; text-align: center; background: #EFEFEF; color: #999999; font-size: 14px; transition: all .5s; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .faqlist li .flist:hover .problem{ background: #E95016; color: #fff; transform: rotateY(360deg); } .faqlist li .flist:hover .answer{ color: #E95016; } .cl1{ background: #C5E0B3; } .cl2{ background: #DEEBF6; } .cl3{ background: #FADBD2; } .cl4{ background: #D6DCE4; } .cl5{ background: #FFF2CC; } .cl6{ background: #E5E0EC; } .cl7{ background: #E2EFD9; } .cl8{ background: #D0CECE; } .cl9{ background: #BDD7EE; } .cl10{ background: #FBE5D5; } .cl11{ background: #CCC1D9; } .cl12{ background: #F7CBAC; } .startbox{ height: 412px; display: flex; justify-content: space-between; } .startbox .start{ width: 50%; height: 100%; position: relative; background-size: 100% 100%; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; padding: 126px 0 0; } .startbox .start1{ background-image: url('../img/img2.png'); } .startbox .start2{ background-image: url('../img/img3.png'); } .startbox .start .masking1{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(88, 88, 88, 0.8); } .startbox .start .masking2{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(88, 88, 88, 0.8); } .startbox .start .t1{ font-size: 36px; color: #FFFFFF; z-index: 2; text-align: center; padding: 0 10%; } .startbox .start a{ margin: 0 auto; margin-top: 50px; padding: 2% 5%; text-align: center; border: 1px solid #EFEFEF; border-radius: 34px; color: #fff; font-size: 24px; z-index: 2; } .startbox .start a:hover{ background: #FFFFFF; box-shadow: 0px 10px 14px 0px rgba(255, 255, 255, 0.5); border: 0; color: rgba(233, 80, 22, 1); } .map{ height: 360px; background-repeat: no-repeat; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 20%; text-align: center; } .map1{ background-image: url('../img/map.png'); margin-top: 20px; } .map .maptop{ border-bottom: 1px solid rgba(233, 80, 22, 0.96); font-size: 34px; color: #E95016; font-weight: bold; height: 191px; line-height: 191px; width: 100%; } .map .mapfoot{ height: 168px; line-height: 168px; font-size: 16px; color: #2B2B2B; width: 100%; } .map a{ margin: 0 auto; position: absolute; top: 50%; transform: translate(0 ,-40%); padding: 2% 6%; text-align: center; border: 1px solid #FD4F00; box-shadow: 0px 10px 14px 0px rgba(255, 255, 255, 0.5); border-radius: 45px; color: #FD4F00; font-size: 24px; background: #ffffff; z-index: 2; } .map a:hover{ background: linear-gradient(266deg, rgba(233, 80, 22,1), rgba(254, 196, 81,1)); box-shadow: 6px 8px 14px 0px rgba(253, 79, 0, 0.5); color: #ffffff; border: 0; } .dibubybox{ background-color: rgba(82, 82, 82, 1); padding: 2.5% 10% !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .dibubybox .dibuby{ width: 20%; display: flex; justify-content:center; align-items: center; margin-top: 10px; } .dibubybox .dibuby img{ width: 50px; height:50px } .dibubybox .dibuby span{ font-size: 18px; color: rgba(255, 255, 255, 1); padding-left: 16px; } .footer{ background-color: #414141; display: flex; flex-direction: column; } .footer .foottop{ display: flex; flex-direction: column; padding: 60px 0 80px; border-bottom: 1px solid #858585; } .footer .foottop h1{ font-size: 48px; color: #FFFFFF; font-weight: bold; } .footer .foottop .foottopc{ display: flex; justify-content: space-between; color: #CDCDCD; font-size: 18px; margin-top: 104px; align-items: flex-end; } .footer .foottop .foottopc .topleft{ display: flex; flex-direction: column; } .footer .foottop .foottopc .topleft .t1{ font-size: 24px; } .footer .foottop .foottopc .topleft .t1 span{ font-size: 40px; color: #FFFFFF; font-weight: bold; } .footer .foottop .foottopc .topright{ text-align: right; line-height: 26px; } .footer .foottop .foottopc .topright .t4{ display: flex; align-items: center; } .footer .footbot{ margin-top: 28px; margin-bottom: 20px; } .footer .footbot ul{ display: flex; justify-content:center; flex-wrap: wrap; align-items: center; } .footer .footbot ul p{ font-size: 14px; margin-right: 5px; color: #CDCDCD; } .footer .footbot li a{ font-size: 14px; margin-right: 5px; color: #CDCDCD; } .footer .footbot li a:hover{ color: #E95016; } @media screen and (max-width: 1408px) { .headnav{ display: none; } .header-btn{ display: block; } .headbox .tel{ display: none; } .service .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ width: 21% !important; line-height: 38px; font-size: 14px; /* text-align: center; */ } .new_box .newlist li .left .date1{ font-size: 30px; } .processlist li{ width: 33.3333333%; } .faqlist li{ width: 32.5%; } .faqlist li:nth-child(n+4){ margin-top: 20px; } .faqlist li{ width: 30%; } .dibubybox{ padding: 2.5% 5% !important; } .dibubybox .dibuby img{ width: 40px; height:40px } .dibubybox .dibuby span{ font-size: 14px; padding-left: 10px; } /* .header{ background: #ffffff; } */ } @media screen and (max-width: 1024px) { .processlist li:hover .plist img{ transform: rotateY(360deg); } .processlist li .plist .bian,.processlist li .plist .bian1,.processlist li .plist .lefttop,.processlist li .plist .rightbot{ display: none !important; } .headbox{ padding: 0 10px; } .main{ padding: 0 5%; } .worklist{ justify-content: space-between; } .worklist li{ height: 228px; margin-right: auto; } .worklist li:nth-child(n+3){ margin-right: 0; margin-top:20px; } .worklist1 li:nth-child(n+3){ margin-right: 0; margin-top:0px; } .numberbox .numberli .message span{ font-size: 38px; } .numberbox .numberli .message h3{ font-size: 13px; } .swiper2 .swiper-slide .message{ width: 50%; line-height: 30px; } .worklist li{ width: 49%; } .dibubybox{ padding: 2.5% 0 !important; } .new_box .newlist li{ width: 47%; margin-right: 3%; } .new_box .newlist li:nth-child(2n){ margin-right: 0; } .new_box .newlist li:nth-child(n+3){ margin-top: 100px; } .processlist { margin: 40px 0 45px; } .faqlist li{ width: 48%; } .faqlist li:nth-child(n+3){ margin-top: 20px; } .map{ padding: 0 10%; } .dibubybox{ display: flex; justify-content: center; } .dibubybox .dibuby span{ font-size: 12px; padding-left: 10px; } .footer .foottop .foottopc{ flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; margin-top: 50px; } .footer .foottop .foottopc .topright{ margin-top: 20px; text-align: left; } .processlist li .plist{ width: 100%; } .processlist li .plist .t1{ font-size: 16px; } .processlist li .plist .t2{ font-size: 12px; } .swiper2 .swiper-slide img{ height: 490px; } } @media screen and (max-width: 768px) { .work_box{ padding: 0 5%; } .new_box .newlist{ padding: 0 5%; } .numberbox .numberli{ width: 50%; } .numberbox .numberli:nth-child(2n) { border-right: 0; } .cases .tab li{ font-size: 14px; } .service .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ width: 50% !important; line-height: 38px; font-size: 12px; } .service .swiper-container-horizontal>.swiper-pagination-bullets,.service .swiper-pagination-custom,.service .swiper-pagination-fraction{ height:120px; overflow: hidden; } .btn_po{ width: 100%; right: 0; top: 50%; } .service{ padding: 0 5%; } .swiper2 .swiper-slide{ margin-top: 120px; } .swiper2 .swiper-slide .message{ width: 100%; padding: 0 15%; line-height: 30px; } .swiper2 .swiper-slide .message .t2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } .swiper2 .swiper-slide .message .t1 span{ font-size: 24px; margin-right: 20px; } .swiper2 .swiper-slide .message .t1{ font-size: 20px; } .cases .tab li{ font-size: 12px; } .box_title .title1,.box_title .title1 .s2{ font-size: 24px; } .box_title .title2{ margin-top: 0; font-size: 12px; } .worklist li .worktitle{ font-size: 12px; } .new_box .newlist li .box1{ justify-content: flex-start; flex-direction: column; } .new_box .newlist li .box1 .left{ width: 100%; display: flex; justify-content: flex-start; flex-direction: row; } .new_box .newlist li .right{ width: 100%; } .bar .t2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 0 5%; } .faqlist li .flist .problem{ font-size: 12px; } .faqlist li .flist .answer{ font-size: 12px; } .map .maptop{ font-size: 24px; } .map .mapfoot{ font-size: 12px; } .startbox .start .t1{ font-size: 28px; } .dibubybox{ display: none; padding: 2.5% 0 !important; } .footer .footbot{ display: none; } .dibubybox .dibuby{ width: 100%; text-align:center } .footer .foottop h1{ font-size: 28px; } .footer .foottop .foottopc .topleft .t1 span{ font-size: 21px; } .bar h3{ font-size: 26px; } .worktitle1{ padding: 0; } .footer .foottop{ padding: 30px 0; } .footer .foottop .foottopc .topleft .t1{ font-size: 18px; } .footer .foottop .foottopc .topleft .t2{ margin-top: 10px; } .bar .bar_btn .btn{ padding: 10px 15px; font-size: 16px; } .headbox .logo{ width: 100px; } .headbox .logo a img{ height: 35px; } } /* 设计 */ .constartbox{ margin-bottom: 74px; } .designbanner,.contactbanner,.newbanner,.ourbanner,.APPbanner,.edubanner{ width: 100%; height: 624px; position: relative; } .newbanner1{ width: 100%; height:350px; position: relative; } .newbanner1 .img1{ position: absolute; left: 0; top: 0; width: 100%; height: 350px; object-fit: cover; } .newbanner1 h1{ position: absolute; top: 50%; transform: translate(0,-50%); font-size:32px; color: #FFFFFF; width: 100%; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .designbanner img,.contactbanner img,.newbanner img,.ourbanner img,.APPbanner img,.edubanner img{ position: absolute; left: 0; top: 0; width: 100%; height: 624px; object-fit: cover; } .designbanner h1,.contactbanner h1,.newbanner h1,.ourbanner h1{ position: absolute; top: 50%; transform: translate(0,-50%); font-size: 60px; color: #FFFFFF; width: 100%; text-align: center; } .edubanner .box{ position: absolute; top: 50%; transform: translate(0,-50%); color: #FFFFFF; width: 100%; text-align: center; } .edubanner .box h1{ font-size: 44px; } .edubanner .box h3{ font-size: 22px; margin-top: 58px; } .design{ padding: 64px 0 140px; } .design .tab{ width: 100%; display: flex; justify-content:center; padding:0 4%; /* flex-wrap: wrap; */ } .design .tab li{ padding:20px 10px; text-align: center; margin-right:10px; background: #F9F9F9; font-size: 18px; color: #666666; cursor:pointer; transition: .5s; } .design .tab li:hover a{ color: #fff !important; } .design a{ display: block; color: #333 !important; margin-right: 10px; margin-right: 1%; width: 170px; } .design .tab li:hover{ background: #E95016; color: #fff; } @media screen and (max-width: 1024px) { .designbanner h1,.contactbanner h1,.newbanner h1,.ourbanner h1{ font-size: 36px; } } @media screen and (max-width: 768px) { .design .tab li{ font-size: 14px; } .designbanner h1,.contactbanner h1,.newbanner h1,.ourbanner h1{ font-size: 24px; } .designbanner, .contactbanner, .newbanner, .ourbanner, .APPbanner, .edubanner{ height: 400px; } .designbanner img, .contactbanner img, .newbanner img, .ourbanner img, .APPbanner img, .edubanner img{ height: 400px; } } /* 联系 */ .container{ width: 100%; height: 550px; background-image: url('../img/map.png'); background-size: 100% 100%; background-repeat: no-repeat; } .company_box{ padding: 100px 0 57px; display: flex; flex-direction: column; align-items: center; text-align: center; } .company_box h1{ font-size: 30px; color: #333333; } .company_box .intro{ margin-top: 29px; color: #666666; } .company_box .card_box{ height: 298px; background: #FFFFFF; margin-top: 64px; } .company_box .card_box .card{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07); border-radius: 6px; display: flex; justify-content: space-between; align-content: center; align-items: center; padding: 60px 0; padding-right: 28px; } .card .logo{ padding: 0 42px; } .card .message{ text-align: left; padding: 0 50px; display: flex; flex-direction: column; font-size: 16px; border-left:1px solid #EEEEEE ; border-right:1px solid #EEEEEE ; } .card .message .title{ font-size: 18px; } .card .message .title span{ font-size: 40px; color: #E95016; font-weight: bold; } .card .message .mail,.card .message .phone,.card .message .address{ margin-top: 28px; color: #333333; } .card .code_box{ display: flex; align-items: center; justify-content: space-around; } .card .code_box .left{ padding: 0 80px; color: #333333; display: flex; flex-direction: column; } .card .code_box .left .CEO{ font-size: 24px; } .card .code_box .left .name{ margin-top: 17px; } .card .code_box .right{ width: 140px; height: 140px; } .card .code_box .right img{ width: 100%; height: 100%; } @media screen and (max-width: 1240px) { .company_box .card_box{ height: auto; } .company_box .card_box .card{ display: flex; justify-content: flex-start; flex-direction: column; align-content: center; align-items: center; padding-right: 0; padding: 30px 0; } .card .logo{ padding: 60px 0; } .card .message{ text-align: center; padding: 0 50px; display: flex; flex-direction: column; font-size: 16px; border-left:0; border-right:0 ; } .card .message .title{ font-size: 18px; } .card .code_box{ display: flex; align-items: center; justify-content:flex-start; flex-direction: column; } .card .code_box .left{ padding: 40px 0; color: #333333; display: flex; flex-direction: column; } .card .code_box .left .CEO{ font-size: 24px; } .card .code_box .left .name{ margin-top: 17px; } .card .code_box .right{ width: 140px; height: 140px; } } @media screen and (max-width: 768px) { .card .message .title{ display: flex; flex-direction: column; } .company_box h1{ font-size: 18px; font-weight: bold; } .company_box .intro{ font-size: 12px; } .company_box{ padding: 30px 0 30px; } .card .logo{ padding: 30px 0; } .card .message .title span{ font-size: 32px; } .startbox .start .t1{ font-size: 22px; } } /* 新闻 */ .new{ padding: 60px 0 101px; margin: 0 10%; display: flex; justify-content: flex-start; } .new .newleft{ width: 80% } .new .newright{ width: 15%; margin-left: 5%; margin-top:110px; } .new .tab{ width: 100%; display: flex; justify-content:center; padding:0 4%; /* flex-wrap: wrap; */ } .new .tab li{ padding:20px 10px; text-align: center; margin-right:10px; background: #F9F9F9; font-size: 18px; color: #666666; cursor:pointer; transition: .5s; } .new .tab li a{ color: #333 !important; } .new .newleft .tab a{ display: block; color: #333 !important; margin-right: 10px; margin-right: 1%; width: 170px; } .new .tab li:hover{ background: #E95016; color: #fff; } /* .new .tab li{ padding:20px 0; margin-top: 10px; width: 170px; text-align: center; margin-right:1%; background: #F9F9F9; font-size: 18px; color: #666666; transition: .5s; cursor:pointer } .new .tab li a{ color: #333 !important; } .new .tab li:hover a{ color: #fff !important; } .new .tab li:hover{ background: #E95016; color: #fff; } */ .new .newlist{ display: flex; flex-direction: column; } .new .newlist li{ display: flex; justify-content: flex-start; padding-bottom: 58px; margin-top: 44px; border-bottom: 1px solid #EEEEEE; } .new .newlist li .image{ width: 240px; height: 240px; overflow: hidden; } .new .newlist li .image img{ object-fit: cover; width: 100%; height: 100%; transition: all .5s; } .new .newlist li .message{ margin-left: 4%; display: flex; flex-direction: column; width: 70%; } .new .newlist li .message h3{ font-size: 24px; color: #000000; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 100%; } .new .newlist li .all{ color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 39px; line-height: 32px; } .new .newlist li .message .foot{ display: flex; justify-content: space-between; margin-top: 35px; } .new .newlist li .message .foot .newmore{ width: 22px; height: 16px; } .new .newlist li .message .foot .date{ color: #666666; } .new .newlist li:hover .image img{ transform: scale(1.2); } .newright ul li { display: flex; flex-direction: column; margin-bottom: 10px; } .newright ul li a .gn{ width: 153px; background: #FAFAFA; border: 1px solid #EEEEEE; display: flex; flex-direction: column; align-items: center; padding: 38px 0 31px; transition: 1s; } .newright ul li a .gn:hover{ background: #E95016; } .newright ul li a .gn p{ color: #333333; } .newright ul li a .gn em{ margin-top: 14px; width: 40px; height: 3px; background: #E95016; } .newright ul li a .gn:hover p{ color: #ffffff; } .newright ul li a .gn:hover em{ background: #FFFFFF; } @media screen and (max-width: 1024px) { .new{ justify-content: flex-start; flex-direction: column; margin: 0 5%; } .new .newleft{ width: 100%; } .new .newright{ width: 100%; margin-left: 0; margin-top: 50px; } .newright ul{ display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; } .newright ul li{ width:22%; } .newright ul li a .gn{ width: auto; text-align: center; } } @media screen and (max-width: 768px) { .newright ul li a .gn p{ font-size: 12px; } .new .newlist li .message span{ font-size: 14px; } .new .tab li{ font-size: 14px; } } /* 我们 */ .ourintbox{ margin: 113px 0 94px; display: flex; flex-direction: column; } .ourintbox h1{ font-size: 30px; color: #333333; } .ourintbox .int{ margin-top: 57px; display: flex; align-items: center; justify-content: flex-start; } .ourintbox .int p{ color: #666666; width: 60%; line-height: 32px; } .ourintbox .int .image{ width: 220px; margin-left: 15%; height: 220px; } .ourintbox .int .image img{ width: 100%; height: 100%; } .ourintbox .ournumber{ margin-top: 108px; display: flex; justify-content: space-between; } .ourintbox .ournumber .ournumberli{ width: 25%; } .ourintbox .ournumber .ournumberli .message { width: 100%; display: flex; flex-direction: column; text-align: center; } .ourintbox .ournumber .ournumberli .message p{ font-size: 60px; color: #666666; } .ourintbox .ournumber .ournumberli .message p span{ color: #333333; font-size: 60px; } .ourintbox .ournumber .ournumberli .message h3{ margin-top: 39px; font-size: 16px; color: #666666; } .advantage{ margin: 85px 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .advantage h1{ font-size: 30px; color: #333333; } .advantage .ourp{ margin-top: 29px; color: #666666; } .advantage .adlistbox .adlist{ display: flex; flex-wrap: wrap; justify-content: space-around; } .advantage .adlistbox .adlist li{ width: 32%; margin-top: 55px; } .advantage .adlistbox .adlist li .ad{ width: 100%; display: flex; flex-direction: column; text-align: center; align-items: center; } .advantage .adlistbox .adlist li .ad img{ width: 60px; height: 60px; transition: .5s; } .advantage .adlistbox .adlist li:hover .ad img{ transform: rotateY(360deg); } .advantage .adlistbox .adlist li .ad .t1{ margin-top: 17px; color: #333333; font-size: 20px; } .advantage .adlistbox .adlist li .ad .t2{ margin-top: 21px; color: #999999; font-size: 14px; } .honnerbox{ padding: 47px 0 88px; background: #F7F7F7; display: flex; flex-direction: column; text-align: center; } .honnerbox h1{ font-size: 30px; color: #333333; } .honnerbox .ourp{ margin-top: 29px; color: #666666; } .honnerbanner { position: relative; margin: 0 10%; margin-top: 50px; min-height: 400px; } .honnerbanner .swiper-slide img{ width: 100%; } .honnerl{ position: absolute; top: 50%; transform: translateY(-50%); left: -102px; z-index: 2; background-image: url('../img/left3.png'); background-size: 80px 80px; background-repeat: no-repeat; width: 80px; height: 80px; cursor: pointer; } .honnerr{ position: absolute; top: 50%; transform: translateY(-50%); right: -102px; z-index: 2; background-image: url('../img/right4.png'); background-size: 80px 80px; background-repeat: no-repeat; width: 80px; height: 80px; cursor: pointer; } /* .honnerl img,.honnerr img{ width: 80px; height: 80px; } */ .honnerl1{ background-image: url('../img/left4.png'); } .honnerr1{ background-image: url('../img/right3.png'); } .partner{ margin: 69px 0 88px; display: flex; flex-direction: column; text-align: center; } .partner h1{ font-size: 30px; color: #333333; } .partner .t1{ color: #666666; margin-top: 28px; line-height: 24px; } .partner .parl{ margin-top: 50px; text-align: left; } .partner .parl .parl_ul{ display: flex;justify-content: center; border-radius: 6px; } .partner .parl .parl_ul .parl_li{ width: 237px; background: #F7F7F7; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); overflow: hidden; transition: all .5s; border-radius: 6px; } .partner .parl .parl_ul .parl_li:hover{ width: 533px; } .partner .parl .parl_ul .parl_li ul{ display: flex; flex-direction: column; padding: 53px 0; border-radius: 6px; color: #666666; } .partner .parl .parl_ul .parl_li ul li{ border-bottom: 1px solid #E6E6E6; width: 100%; padding: 10px 0; padding-left: 10%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .partner .parl .parl_ul .parl_li ul li:nth-child(1){ font-size: 24px; padding-bottom: 10px; } .partner .parl .parl_ul .parl_li:hover { box-shadow:0px 10px 14px 0px rgba(253, 79, 0, 0.47); } .partner .parl .parl_ul .parl_li:hover ul{ background: #E95016; } .partner .parl .parl_ul .parl_li:hover ul li{ border-bottom: 1px solid #ffffff; color: #fff; background: #E95016; } .partner .parl .parl_ul .parl_li ul li:last-child{ border-bottom: 0; } .parlbg{ background: #E95016; width: 533px !important; box-shadow:0px 10px 14px 0px rgba(253, 79, 0, 0.47); } .parlbg1{ background: #E95016; color: #fff !important; } .partner .there{ margin-top: 43px; color: #E95016; font-size: 24px; font-weight: bold; } @media screen and (max-width: 1240px) { .ourintbox .int p{ font-size: 14px; } .ourintbox{ margin: 53px 0 50px; } .ourintbox .ournumber{ margin-top: 50px; flex-wrap: wrap; } .ourintbox .ournumber .ournumberli{ width: 50%; margin-top: 20px; } .ourintbox .ournumber .ournumberli .message h3{ margin-top: 10px; } .partner .parl .parl_ul .parl_li ul li{ font-size: 12px; } } @media screen and (max-width: 768px) { .ourintbox .int{ display: flex; flex-direction: column-reverse; } .ourintbox .int p{ font-size: 12px; width: 100%; margin-top: 50px; } .ourintbox h1{ text-align: center; } .ourintbox .int .image{ margin-left: 0; } .ourintbox .ournumber .ournumberli .message h3{ font-size: 12px; } .honnerl { background-size: 40px 40px; width: 40px; height: 40px; left: 0 } .honnerr{ background-size: 40px 40px; width: 40px; height: 40px; right: 0 } .honnerbanner .swiper-slide img{ height: 600px; } .advantage .adlistbox .adlist li{ width: 48%; margin-top: 55px; } .advantage .adlistbox .adlist li .ad .t1{ font-size: 16px; } .advantage .adlistbox .adlist li .ad .t2{ font-size: 12px; } .advantage .ourp,.honnerbox .ourp{ font-size: 12px; } .partner .parl .parl_ul .parl_li{ width: 20%; } .parlbg{ width: 60%; } .partner .parl .parl_ul .parl_li ul li:nth-child(1){ font-size: 16px; } .partner .parl .parl_ul .parl_li ul li{ padding-left: 10px; } } /* APP开发 */ .APPbanner{ position: relative; } .APPbanner .bnnav{ position: absolute; bottom: 33px; left: 50%; transform: translateX(-50%); } .APPbanner .bnnav ul{ display: flex; justify-content:space-between; width: 100%; } .APPbanner .bnnav ul a{ width: 183px; margin-right: 10px; } .APPbanner .bnnav ul a:last-child{ margin-right: 0; } .APPbanner .bnnav ul li{ height: 100%; width: 100%; display: flex; flex-direction: column; padding: 54px 29px 39px; background: rgba(0, 0, 0, 0.24); } .APPbanner .bnnav ul li h3{ color: #FFFFFF; font-size: 18px; } .APPbanner .bnnav ul li p{ height: 40px; font-size: 14px; color: #E6E6E6; margin-top: 34px; } .APPbanner .bnnav ul li .image{ width: 48px; height: 48px ; margin-top: 31px ; overflow: hidden ; } .APPbanner .bnnav ul li .image img{ width: 100%; height: 100% ; position: inherit !important; } .APPbanner .bnnav ul li:hover{ background: rgba(233, 80, 22, 1); } .slogan{ display: flex; justify-content: space-between; margin: 60px 0 82px; } .slogan .left{ width: 30%; height: 312px; background-image: url('../img/img_border.png'); background-size: 100% 100%; padding: 8px 15px; } .slogan .left .leftbr{ width: 100%; height: 100%; overflow: hidden ; position: relative; } .slfont{ position: absolute; top: 0; width: 100%; } .slfont h1{ font-size: 42px; font-weight: bold; color: #fff; text-align: center; margin-top: 100px; } .slfont p{ font-size: 28px; text-align: center; color: #fff; margin-top: 10px; } .slogan .left img{ object-fit: cover; width: 100%; height: 100%; } .slogan .right{ width: 65%; display: flex; flex-direction: column; } .slogan .right h1{ font-size: 30px; color: #000000; } .slogan .right .box{ margin-top: 23px; padding: 0 17px 31px; display: flex; flex-direction: column; background: #F7F7F7; } .slogan .right .box .title{ margin-top: 17px; display: flex; justify-content: flex-start; align-items: center; } .slogan .right .box .title .title1{ height: 24px; line-height: 24px; width: 58px; text-align: center; background: #F5F5F5; border: 1px solid #C4C4C4; font-size: 12px; color: #999999; } .slogan .right .box .title .title2{ margin-left: 20px; font-size: 14px; color: #333333; } .slogan .right .box .title .title2 span{ color: #E95016; } .slogan .right .box .title .title3{ margin-left: 20px; display: flex; justify-content: flex-start; } .slogan .right .box .title .title3 a{ height: 24px; line-height: 24px; width: 77px; text-align: center; border: 1px solid #C4C4C4; background: #FFFFFF; font-size: 12px; color: #999999; display:inline-block; margin-right: 5px; } .slogan .right .box .btn{ margin-top: 20px; display: flex; justify-content: flex-start; } .slogan .right .box .btn a{ height: 32px; line-height: 32px; text-align: center; width: 110px; background: #FFFFFF; border: 1px solid #858585; font-size: 14px; color: #666666; margin-right: 10px; } .slogan .right .box .btn a:hover{ background: #E95016; color: #ffffff; border: 1px solid #E95016; } .title3c{ background: #E95016 !important; color: #ffffff !important; border: 1px solid #E95016 !important; } .whybox{ margin: 82px 0 68px; } .whybox h1{ font-size: 30px; color: #333333; text-align: center; display: flex; justify-content: center } .whybox h1 span{ color: #E95016; font-size: 30px; margin-left: 5px; } .whybox .why{ display: flex; justify-content: space-between; align-items: center; margin-top: 110px; } .whybox .why .left{ width: 35%; } .whybox .why .left ul{ display: flex; flex-direction: column; } .whybox .why .left ul li{ display: flex; justify-content: space-between; margin-top: 104px; align-items: center; } .whybox .why .left ul li:first-child{ margin-top: 0; } .whybox .why .left ul li .font{ width: 70%; display: flex; flex-direction: column; height: 150px; } .whybox .why .left ul li .font h1{ font-size: 24px; color: #000000; text-align: left; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 100%; display: block; } .whybox .why .left ul li .font p{ margin-top: 30px; color: #999999; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .whybox .why .left ul li img{ width: 80px; height: 80px; } /* .whybox .why .center{ width: 20%; height: 80px; } */ .needbox{ padding: 65px 10% 78px; background: #F7F7F7; } .needbox h1{ font-size: 30px; color: #333333; text-align: center; } .needbox .need{ margin-top: 19px; } .needbox .need ul a{ display: flex; justify-content: space-between; flex-wrap: wrap; } .needbox .need ul li{ width: 33%; height: 194px; margin-top: 20px; position: relative; color: #FFFFFF; } .needbox .need ul li img{ position: absolute; left: 0; top: 0; width: 100%; height: 194px; } .needbox .need ul li h1{ position: absolute; font-size: 30px; color: #fff; text-align: center ; width: 100%; top: 49px; } .needbox .need ul li p{ padding: 0 10%; position: absolute; bottom: 0; text-align: center; opacity: 0; transition: all .5s; font-size: 16px; } .needbox .need ul li:hover p{ bottom: 38px; opacity: 1; } .havebox{ margin: 80px 0 85px; } .havebox h1{ font-size: 30px; color: #333333; text-align: center; } .havebox .have{ margin-top: 64px; } .havebox .have ul{ display: flex; justify-content: space-between; } .havebox .have ul li{ width: 24%; border: 1px solid #EEEEEE; border-radius: 6px; } .havebox .have ul li .haveli{ width: 100%; display: flex; align-items: center; flex-direction: column; text-align: center; padding: 52px 10% 30px; } .havebox .have ul li .haveli img{ width: 60px; height: 60px; transition: all .5s; } .havebox .have ul li:hover .haveli img{ transform: rotateY(360deg); } .havebox .have ul li .haveli .t1{ margin-top: 32px; color: #333333; font-size: 20px; height: 52px; } .havebox .have ul li .haveli .t2{ font-size: 14px; margin-top: 21px; color: #999999; } .superiority{ padding: 60px 10%; background-image: url('../img/banner7.png'); background-repeat: no-repeat; background-size: 100% 100%; } .superiority1{ background: #fff !important; } .superiority h1{ font-size: 30px; color: #333333; text-align: center; } .superiority .syperbox{ margin-top: 26px; } .superiority .syperbox ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } .superiority .syperbox ul li{ width: 48%; margin-top: 21px; } .superiority .syperbox ul li div{ width: 100%; display: flex; align-items: center; text-align: center; flex-direction: column; } .superiority .syperbox ul li div img{ width: 108px; height: 108px; } .superiority .syperbox ul li div .t1{ font-size: 24px; color: #333333; } .superiority .syperbox ul li div .t2{ font-size: 14px; color:#999999; margin-top: 15px; } .succeedbox{ margin: 79px 0 0; border: 0; } .succeedbox h1{ font-size: 30px; color: #333333; text-align: center; } .succeedbox .t1{ margin-top: 29px; color: #666666; text-align: center; } .flow h1{ font-size: 30px; color: #333333; text-align: center; } .flow .flowp{ margin-top: 29px; color: #999999; text-align: center; } .make{ background-image: url('../img/banner8.png'); background-repeat: no-repeat; display: flex; flex-direction: column; text-align: center; align-items: center; padding: 114px 0 74px; background-size: 100% 100%; } .make h1{ color: #E95016; font-size: 30px; } .make h1 span{ font-size: 48px; color: #E95016; } .make .t1{ margin-top: 29px; color: #333333; } .make .btn{ margin-top: 50px; width: 386px; height: 90px; line-height: 90px; background: #ffffff; color: #E95016; box-shadow: 0px 10px 14px 0px rgba(255, 255, 255, 0.5); border: 1px solid #E95016; border-radius: 45px; font-size: 24px; cursor: pointer; } .make .btn:hover{ color: #ffffff; border:0; background: linear-gradient(266deg, rgba(233, 80, 22, 0.96), rgba(255, 159, 43, 0.96)); box-shadow: 0px 10px 14px 0px rgba(253, 79, 0, 0.47); } .make .t2{ margin-top: 32px; color: #333333; } @media screen and (max-width: 1500px) { .slfont h1{ font-size: 24px } .slfont p{ font-size: 16px } } @media screen and (max-width: 1240px) { .needbox .need ul li p{ font-size: 14px; } /* .APPbanner .bnnav ul a{ width:20% } .APPbanner .bnnav ul li{ padding: 20px 0 ; width: 100%; text-align: center; align-items: center; } .APPbanner .bnnav ul li p{ display: none; } .APPbanner .bnnav ul{ width: 600px; } */ } @media screen and (max-width: 768px) { .superiority h1,.needbox h1,.slogan .right h1,.havebox h1,.succeedbox h1,.flow h1{ font-size: 20px; text-align: center; font-weight:bold } .slogan { flex-direction: column; margin: 60px 0 82px; } .slogan .left{ width: 100%; } .slogan .right{ width: 100%; margin-top: 30px; } .slogan .right .box .title{ flex-direction: column; } .slogan .right .box .title .title2{ font-size: 12px; margin:10px 0 0; } .slogan .right .box .title .title3{ font-size: 12px; margin-left: 0; flex-wrap: wrap; justify-content: space-between; } .slogan .right .box .title .title3 a{ width: 48%; margin:10px 0 0 ; } .slogan .right .box .btn{ margin-top: 28px; display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; } .slogan .right .box .btn a{ text-align: center; width:100%; font-size: 14px; margin: 10px 0 0 ; } .whybox,.havebox{ margin: 40px 0 40px; } .whybox .why{ margin-top: 40px; } .whybox .why .left ul li{ margin-top: 40px; } .whybox h1{ font-size: 20px; flex-direction: column; } .whybox h1 span{ margin-left: 0; } .whybox .why .left{ width: 48%; } .whybox .why .center{ display: none; } .whybox .why .left ul li .font h1{ font-size: 16px; } .whybox .why .left ul li .font p{ font-size: 12px; } .whybox .why .left ul li img{ width: 60px; height: 60px; } .needbox .need ul li{ width: 48%; } .needbox .need ul li h1{ font-size: 20px; } .needbox .need ul li p{ font-size: 12px; padding: 0 4%; } .havebox .have ul{ flex-wrap: wrap; } .havebox .have ul li{ width: 48%; margin-top: 10px; } .havebox .have{ margin-top: 40px; } .superiority{ padding: 30px 2%; } .superiority .syperbox ul li div .t1{ font-size: 18px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 100%; } .superiority .syperbox ul li div .t2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .succeedbox .t1,.flow .flowp{ font-size: 12px; } .succeedbox{ margin:40px 0 0; } .make .btn{ width: 70%; height: 50px; line-height: 50px; font-size: 16px; } } @media screen and (max-width: 600px) { .APPbanner .bnnav ul a{ width:20% } .APPbanner .bnnav ul li{ padding: 20px 0 ; width: 100%; text-align: center; min-height: 180px; } .APPbanner .bnnav ul li p{ display: none; } .APPbanner .bnnav ul{ width: 350px; } } /* 业务-小程序 */ .nobg{ background: #ffffff; } .slogan1{ margin: 65px 0 ; display: flex; justify-content: space-around } .slogan1 .image{ text-align: center; } .slogan1 .image img{ width: 300px; height: 300px; } .slogan1 p{ width: 50%; color: #333333; font-size: 16px; } .applet{ padding: 177px 10%; background-image: url('../img/banner7.png'); background-repeat: no-repeat; background-size: 100% 100%; } .applet h1{ font-size: 30px; color: #333333; } .applet p{ margin-top: 100px; color: #333333; width: 50%; } /* 业务-公众号 */ .particular{ padding-bottom: 92px; text-align: center; } .particular h1{ font-size: 24px; color: #333333; } .particular p{ color: #999999; font-size: 14px; margin-top: 10px; } .particular .box{ margin-top: 20px; display: flex; justify-content:center; flex-wrap: wrap; } .particular .box li{ width: 20%; display: flex; flex-direction: column; text-align: center; align-items: center; margin-top: 20px; } .particular .box li img{ width: 100px; height: 100px; } .particular .box p{ margin-top: 18px; color: #000000; } @media screen and (max-width: 768px) { .particular .box li{ width: 40% } } /* 业务-标准型网站 */ .datum{ display: flex; justify-content: flex-start; align-items: center; } .datum .left{ display: flex; flex-direction: column; } .datum .left h1{ font-size: 30px; } .datum .left p{ margin-top: 48px; font-size: 14px; color: #666666; line-height: 28px; } .datum .right{ width: 50%; margin-left: 10%; } .datum .right img{ width: 100% } .intprocess{ background: #F7F7F7; padding-top: 69px; } .intprocess .processlist{ margin: 61px 0 0px; } .intprocess .processlist li img{ transition: all .5s; } .intprocess .processlist li:hover img{ transform: rotateY(360deg); } .sales{ display: flex; justify-content: flex-start; align-items: center; } .sales .right{ display: flex; flex-direction: column; } .sales .right h1{ margin-top: 127px; font-size: 30px; } .sales .right p{ margin-top: 48px; font-size: 14px; color: #666666; line-height: 28px; } .sales .left{ width: 50%; margin-right: 10%; } .sales .left img{ width: 100% } .deploy{ margin-top: 80px; display: flex; flex-direction: column; text-align: center; align-items: center; } .deploy h1{ font-size: 30px; } .deploy .deployp{ margin-top: 22px; font-size: 14px; color: #999999; } .deploy .promise{ margin-top: 47px; display: flex; justify-content: space-between; width: 100%; align-items: center; } .deploy .promise .promise1{ color: #E95016; } .deploy .promise .promise1 span{ color: #666666; } .deploy .promise .promise2{ color: #E95016; } .deploy .promise .promise2 span{ font-size: 24px; font-weight: bold; } table{ margin:35px 0 91px; width: 100%; } table tbody tr:nth-child(1) td{ background: #F7F7F7; } table tbody tr td:nth-child(1){ width: 172px; background: #F7F7F7; border: 1px solid #E5E5E5; height: 60px; line-height: 60px; font-size: 14px; } table tbody tr td:nth-child(1) img{ margin-right: 5px; vertical-align: middle; } table tbody tr td:nth-child(2){ padding-left: 39px; text-align: left; border: 1px solid #E5E5E5; font-size: 14px; } table tbody tr td:nth-child(3){ width: 222px; font-size: 14px; height: 60px; border: 1px solid #E5E5E5; } @media screen and (max-width:1240px) { .deploy .promise .promise2{ display: none; } .datum{ display: flex; flex-direction: column; text-align: center; } .datum .left{ display: flex; flex-direction: column; width: 100%; } .datum .left h1{ margin-top: 20px; font-size: 30px; } .datum .left p{ margin-top: 24px; font-size: 12px; } .datum .right{ width: 50%; margin-left:0 } .datum .right img{ width: 100%; } .sales{ display: flex; flex-direction: column; text-align: center; } .sales .right{ display: flex; flex-direction: column; width: 100%; } .sales .right h1{ margin-top: 20px; font-size: 30px; } .sales .right p{ margin-top: 24px; font-size: 12px; margin-bottom: 24px; } .sales .left{ width: 50%; margin-right: 0 } .sales .left img{ width: 100%; } } @media screen and (max-width: 768px) { table tbody tr:nth-child(1){ display: none; } table tbody tr{ display: flex; flex-direction: column; align-items: center; border: 1px solid #E5E5E5; text-align: center; } table tbody tr td:nth-child(1),table tbody tr td:nth-child(2),table tbody tr td:nth-child(3){ border: 0; } table tbody tr td:nth-child(1){ width: 100%; background: #E95016; color: #fff; } table tbody tr td:nth-child(2){ padding-left: 0; text-align: center; width: 100%; min-height: 60px; align-items: center; display: flex; justify-content: center; } table tbody tr td:nth-child(3){ line-height: 60px; width: 100%; text-align: center; background: #E5E5E5; } .slogan1{ flex-direction: column; } .slogan1 p,.applet p{ width: 100%; text-align: center; } .applet{ text-align: center; } .intprocess .processlist{ margin-top: 0; } } /* 业务-软硬件网站 */ .what{ display: flex; flex-direction: column; align-items: center; } .what h1{ font-size: 30px; width: 100%; text-align: center; } .what .whatp{ color:#999999; margin-top: 22px; width: 100%; text-align: center; } .what .whatbox{ display: flex; margin-top: 32px; flex-wrap: wrap; justify-content: space-between; } .what .whatbox li{ width: 49%; height: 230px; margin-top: 16px; display: flex; align-items: center; justify-content:space-around } .what .whatbox li p{ width: 60%; font-size: 18px; color: #2A2A2A; line-height: 30px; } .what .whatbox li:nth-child(1){ background: #E2EFD9; } .what .whatbox li:nth-child(2){ background:#FFF2CC ; } .what .whatbox li:nth-child(3){ background: #E5E0EC; } .what .whatbox li:nth-child(4){ background: #FADBD2; } @media screen and (max-width: 768px) { .what .whatbox li{ width: 100%; height: 230px; margin-top: 16px; display: flex; align-items: center; flex-direction: column; } .what .whatbox li p{ width: 100%; font-size: 18px; color: #2A2A2A; line-height: 30px; text-align: center; font-size: 12px; } } /* 资质荣誉 */ .honor{ display: flex; justify-content: space-around; align-items: center; } .honor1{ background: #F7F7F7; flex-direction: row-reverse; } .honor .fontl{ width: 50%; text-align: left; margin-right: 10%; } .honor1 .fontl{ width: 50%; text-align: left; margin-right: 0; margin-left: 10%; } .honor .imgr{ width: 40%; } .honor .imgr img{ width: 100%; } .honor .fontl h1{ font-size: 30px; color: #333333; } .honor .fontl p{ font-size: 16px; color: #666666; margin-top: 38px; line-height: 32px; } @media screen and (max-width: 1024px) { .honor{ flex-direction: column; padding: 30px 0 30px; } .honor .fontl,.honor1 .fontl{ width: 100%; text-align: center; margin-right:0; margin-left: 0; } } @media screen and (max-width: 768px) { .honor .fontl p{ font-size: 12px; } } /* 解决方案 */ .classify{ padding: 0 15%; } .classify ul{ display: flex; justify-content: flex-start; } .classify ul li{ width: 25%; border-left: 1px solid #EEEEEE; padding:8% 2%; display: flex; flex-direction: column; } .educolor{ color: #ffffff !important; } .morebg{ background-image: url('../img/more1.png') !important; } .classify ul li:nth-child(1){ border-left: 0; } .classify ul li img{ width: 50px; height: 50px; } .classify ul li .climg{ width: 58px; height: 60px; } .classify ul li .text{ display: flex; flex-direction: column; } .classify ul li h1{ margin-top: 39px; font-size: 30px; color: #333333; } .classify ul li p{ margin-top: 14px; font-size: 14px; color: #999999 } .classify ul li a{ background-image: url('../img/more2.png'); background-repeat: no-repeat; background-size:100%; width: 60px; height: 60px; display: block; margin-top: 33px; } .classify ul li:hover a{ background-image: url('../img/more1.png'); } .classify ul li:hover{ background: #E95016; } .classify ul li:nth-child(1) .climg{ background-image: url('../img/icon67_0.png'); } .classify ul li:nth-child(1):hover .climg{ background-image: url('../img/icon67_1.png'); } .classify ul li:nth-child(2) .climg{ background-image: url('../img/icon68_0.png'); } .classify ul li:nth-child(2):hover .climg{ background-image: url('../img/icon68_1.png'); } .classify ul li:nth-child(3) .climg{ background-image: url('../img/icon66_0.png'); } .classify ul li:nth-child(3):hover .climg{ background-image: url('../img/icon66_1.png'); } .classify ul li:nth-child(4) .climg{ background-image: url('../img/icon69_0.png'); } .classify ul li:nth-child(4):hover .climg{ background-image: url('../img/icon69_1.png'); } .classify ul li:hover h1,.classify ul li:hover p{ color: #ffffff; } .edubg{ background: #E95016; } .edubg1{ background-image: url('../img/icon67_1.png') !important; } .edubg2{ background-image: url('../img/icon68_1.png') !important; } .edubg3{ background-image: url('../img/icon66_1.png') !important; } .edubg4{ background-image: url('../img/icon69_1.png') !important; } .scheme{ margin: 100px 0; display: flex; justify-content: flex-start; } .scheme .left{ width: 40%; display: flex; justify-content: center; } .scheme .right{ margin-left: 10%; width: 40%; display: flex; flex-direction: column; color: #333333; } .scheme .right h1{ font-size: 30px; } .scheme .right p{ font-size: 14px; margin-top: 30px; line-height: 24px; } .bar1,.bar2{ overflow: hidden; width: 100%; } .bar1 img,.bar2 img{ width: 100%; min-height: 150px; object-fit: cover; } .edubox1{ margin: 92px 0 140px; display: flex; flex-direction: column; } .edubox1 h1{ font-size: 30px; text-align: center; } .edubox1 .edutent{ margin-top: 118px; display: flex; justify-content: space-between; align-items: center; } .edubox1 .edutent .center{ display: flex; align-items: center; } .edubox1 .edutent .center img{ width: 100px; height: 100px; } .edubox1 .edutent .text{ display: flex; flex-direction: column; text-align: left; width: 30%; } .edubox1 .edutent .text h1{ text-align: left; } .edubox1 .edutent .text p{ margin-top: 15px; font-size: 14px; line-height: 24px; } /* .edubox2{ background-image: url('../img/img30.png'); background-repeat: no-repeat; height: 660px; background-size: 100% 660px; position: relative; } */ /* .edubox3{ background-image: url('../img/img26.png'); background-repeat: no-repeat; height: 660px; background-size: 100% 660px; position: relative; } */ .edubox2,.edubox3{ overflow: hidden; width: 100%; position: relative; } .edubox2 img,.edubox3 img{ width: 100%; /* min-height:400px; */ object-fit: cover; } .edubox2 .chase{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; border: 1px solid #cdb89f; padding:8% 4%; } .edubox2 .chase p:nth-child(1){ color: #ffffff; font-size: 30px; text-align: center; margin-bottom: 20px; } .edubox2 .chase p:last-child{ color: #ffffff; font-size: 14px; text-align: center; margin-top: 20px; } .edubox3 .text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .edubox3 .text h1{ font-size: 30px; } .edubox3 .text p{ font-size: 12px; margin-top: 30px; line-height: 24px; } @media screen and (max-width: 768px) { .classify{ padding: 0 5%; } .classify ul{ margin-top: 20px; flex-wrap: wrap; flex-direction: column; } .classify ul li{ width: 100%; padding: 0; border-left: 0; justify-content: flex-start; flex-direction: row; align-items: center; } .classify ul li .text{ margin-left: 20px; } .classify ul li h1{ font-size: 20px; margin-top: 0px; } .classify ul li p{ font-size: 12px; margin-top: 0; } .classify ul li a{ margin-top: 0px; margin-left: auto; } .scheme{ margin: 50px 0; display: flex; justify-content: flex-start; flex-direction: column; } .scheme .left{ width: 100%; display: flex; justify-content: center; } .scheme .left img{ width: 50%; } .scheme .right{ margin-top: 40px; width: 100%; margin-left: 0; text-align: center; } .scheme .right p{ font-size: 12px; } .edubox1 .edutent{ margin-top: 40px; display: flex; flex-direction: column; align-items: center; } .edubox1 .edutent .text{ display: flex; flex-direction: column; text-align:center; width: 100%; } .edubox1 .edutent .text h1{ text-align: center; font-size: 20px; } .edubox1 .edutent .center{ margin: 20px 0; } .edubox2 .chase p:nth-child(1){ font-size: 15px; font-weight: bold; } .edubox2 .chase p:last-child{ font-size: 12px; } .edubox3{ display: none; } .edubox3 .text h1{ font-size: 18px; text-align: center; } } /* 医美行业 */ .tiyan{ background: #fff; padding: 90px 10% 0; color: #333333; font-size: 30px; } .tiyan h2{ text-align: center; } .tiyan ul{ margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; } .tiyan ul li{ display: flex; flex-direction: column; align-items: center; width: 33%; margin-top: 54px; cursor: pointer; } .tiyan ul li img{ width: 136px; height: 136px; transition: all .8s; } .tiyan ul li:hover img{ transform: rotateY(360deg); } .tiyan ul li p{ margin-top: 23px; } .tiyan ul li i{ width: 44px; height: 2px; background: #333333; margin-top: 23px; } @media screen and (max-width: 768px) { .tiyan{ padding: 40px 5% 0; font-size: 20px; } .tiyan ul li{ width: 50%; margin-top: 20px; } .tiyan ul li img{ width: 96px; height: 96px; } .tiyan ul li p{ margin-top: 15px; text-align: center; } .tiyan ul li i{ width: 44px; height: 2px; background: #333333; margin-top: 15px; } } /* 业务 */ .h5box1{ margin-top: 90px; } .h5box1 h1{ text-align: center; font-size: 30px; color: #333333; } .h5box1 h1 span,.deploy h1 span{ color: #E95016; font-size: 30px; } .h5box1 ul{ display: flex; margin-top: 20px; flex-wrap: wrap; } .h5box1 ul li{ display: flex; position: relative; width: 48%; flex-direction: column; padding: 40px 38px 0 52px; height: 230px; margin-top: 16px; } .h5box1 ul li:nth-child(even){ margin-left: 20px; } .h5box1 ul li img{ position: absolute; right: 8px; bottom: 8px; width: 150px; height: 150px; } .h5box1 ul li .t1{ font-size: 24px; color: #000000; } .h5box1 ul li .t2{ margin-top: 45px; color: #000000; font-size: 14px; } .h5box1 ul li:nth-child(1){ background: #C5E0B3; } .h5box1 ul li:nth-child(2){ background: #DEEBF6 } .h5box1 ul li:nth-child(3){ background: #FADBD2 } .h5box1 ul li:nth-child(4){ background: #D6DCE4 } .h5box1 ul li:nth-child(5){ background: #FFF2CC } .h5box1 ul li:nth-child(6){ background:#E5E0EC } .h5box1 ul li:nth-child(7){ background: #E2EFD9 } .h5box1 ul li:nth-child(8){ background: #BDD7EE } .h5gn{ padding-bottom: 20px; display: flex; flex-direction: column; } .h5gn ul{ display: flex; flex-wrap: wrap; } .h5gn p{ margin-top: 38px; font-size: 14px; color: #666666; } .h5gn ul li{ display: flex; flex-direction: column; text-align: center; align-items: center; width: 16%; margin-top: 28px; } .h5gn ul li p{ margin-top: 20px; color: #999999; font-size: 14px; } .yinxiao{ margin: 90px 0 60px 0; display: flex; flex-direction: column; } .yinxiao h1{ font-size: 30px; color: #333333; text-align: center; } .yinxiao h1 span{ font-size: 30px; color: #E95016; } .yinxiao .t1{ color: #999999; font-size: 14px; text-align: center; margin-top: 22px; } .yxbox{ display: flex; justify-content: space-between; align-items: center; margin-top: 35px; } .yxbox .yxbox1{ display: flex; flex-direction: column; align-items: center; } .yxbox .vs{ margin: 100px 17px 0; } .yxbox .yxbox1 .yxbox1p{ padding: 22px 35px; color: #E95016; border-radius: 10px; background: #FDEDE7; } .yxbox .yxbox1 .yxbox1p p{ font-size: 12px; } .yxbox .yxbox1 .yxbox3p{ padding: 22px 35px; color: #999999; border-radius: 10px; background:#F7F7F7 } .yxbox .yxbox1 .yxbox3p p{ font-size: 12px; } .yxbox .yxbox1 .yximg1{ margin-top: 30px; height: 590px; } .yxbox .yxbox1 .yximg1 img{ width: 100%; height: 100%; } .yxbox2{ margin-top: 75px; display: flex; justify-content: space-between; } .yxbox2 .yximg2{ width: 60%; height: 244px; } .yxbox2 .yximg2 img{ width: 100%; height: 100%; } .yxbox2 .yxbox2p{ display: flex; flex-direction: column; text-align: center; align-items: center; padding-top: 50px; margin-left: 44px; } .yxbox2 .yxbox2p .p1{ font-weight: bold; } .yxbox2 .yxbox2p .p1,.yxbox2 .yxbox2p .p2{ font-size: 30px; color: #333333; } .yxbox2 .yxbox2p .p1 span,.yxbox2 .yxbox2p .p2 span{ font-size: 30px; color: #E95016; } .yxbox2 .yxbox2p i{ width: 90px; height: 4px; background:#E95016 ; margin: 18px 0; } .shijue{ width: 100%; background: #EEEEEE; padding-top: 70px; padding-bottom: 80px; text-align: center; display: flex; flex-direction: column; } .shijue .p1{ font-size: 30px; color: #E95016; } .shijue .p2{ font-size: 14px; color: #666666; margin-top: 21px; } .shijue .p3{ font-size: 16px; color: #333333; margin-top: 44px; } .shijue .p4{ margin: 0 auto; margin-top: 18px; width: 241px; height: 49px; line-height: 49px; background: linear-gradient(90deg, #FDBD4D, #EA5115); border-radius: 25px; font-size: 16px; color: #FFFFFF; text-align: center; } .shijue .sjimg{ width: 100%; display: flex; align-items: center; justify-content: space-around; margin-top: 35px; } .shijue .sjimg img{ width: 80%; } .sjbox1{ display: flex; justify-content: space-around; font-size: 16px; color: #333333; } .sjbox1 p{ text-align: left; } .yinxiaobox{ padding-top: 92px; display: flex; flex-direction: column; } .yinxiaobox h1{ font-size: 30px; color: #333333; text-align: center; } .yinxiaobox h1 span{ color: #E95016; font-size: 30px; text-align: center; } .yinxiaobox .t1{ font-size: 14px; color: #666666; text-align: center;margin-top: 21px; text-align: center; } .yinxiao1{ margin-top: 75px; display: flex; justify-content: space-between; } .yinxiao1 .left{ width: 50%; } .yinxiao1 .left img{ width: 100%; height: 100%; } .yinxiao1 .right{ margin-left: 30px; display: flex; flex-direction: column; padding-top: 38px; text-align: left; } .yinxiao1 .right1{ margin-left: 0px; margin-right: 30px; } .yinxiao1 .right h1{ font-size: 18px; color: #E95016; text-align: left; } .yinxiao1 .right p{ color: #666666; font-size: 14px; margin-top: 30px; text-align: left; } @media screen and (max-width: 1024px) { .h5box1 ul li{ padding: 30px 20px 0 20px; } .h5box1 ul li img{ width: 90px; height: 90px; } .yxbox{ display: flex; flex-direction: column; align-items: center; margin-top: 35px; } .yxbox .vs{ margin: 17px 0 } .yxbox .yxbox1 .yximg1{ margin-top: 30px; height: 420px } .yxbox2{ margin-top: 75px; display: flex; flex-direction: column; } .yxbox2 .yximg2{ margin: 0 auto; width: 60%; height: 150px; } .yxbox2 .yxbox2p .p1,.yxbox2 .yxbox2p .p2{ font-size: 16px; color: #333333; } .yxbox2 .yxbox2p .p1 span,.yxbox2 .yxbox2p .p2 span{ font-size: 16px; color: #E95016; } .yxbox2 .yxbox2p{ margin-left: 0; } .sjbox1{ display: flex; flex-direction: column; align-items: center; } .sjbox1 .t2{ margin-top: 20px; } .sjbox1 p{ text-align: center; } .yinxiao1{ margin-top: 75px; display: flex; flex-direction: column; } .yinxiao2{ margin-top: 75px; display: flex; flex-direction:column-reverse; } .yinxiao1 .left{ width: 100%; } .yinxiao1 .right{ margin-left: 0px; display: flex; flex-direction: column; padding-top: 38px; text-align: center; } .yinxiao1 .right1{ margin-right: 0px; } .yinxiao1 .right h1{ text-align: center; } .yinxiao1 .right p{ color: #666666; font-size: 14px; margin-top: 30px; text-align: center; } } @media screen and (max-width: 768px) { .h5box1 ul li{ padding: 30px 20px 0 20px; height: 150px; width: 100%; } .h5box1 ul li .t2{ margin-top: 20px; color: #000000; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .h5box1 ul li:nth-child(even){ margin-left: 0px; } .h5gn ul li{ width: 25%; } .yxbox2 .yximg2{ margin: 0 auto; width:100%; height: 150px; } } /* 新闻详情 */ .ndtitle{ width: 100%; height: 100px; display: flex; justify-content: space-between; background: #FFFFFF; box-shadow: 6px 8px 30px 0px rgba(0, 0, 0, 0.06); border-radius: 50px; padding: 0 0 0 46px; } .ndtitle .ndtitle1{ display: flex; justify-content: flex-start; align-items: center; } .ndtitle .ndtitle1 img{ width: 20px; height: 20px; margin-right: 10px; } .ndtitle .ndtitle1 p{ font-size: 14px; color: #999999; } .ndtitle .ndtitle2{ display: flex; justify-content: flex-start; align-items: center; } .ndtitle .ndtitle2 a{ display: flex; justify-content: flex-start; align-items: center; margin-right: 40px; cursor: pointer; position:relative; margin-top: 10px; } .ndtitle .ndtitle2 img{ width: 30px; height: 30px; margin-right: 12px; } .ndtitle .ndtitle2 p{ font-size: 18px; color: #333333; } .detail{ position: relative; top: -50px; transform: translateX(-50%); } .detail .text{ min-height:300px; margin-top: 88px; font-size: 14px; color: #333333; line-height: 28px; } .ndtitles{ margin-top: 100px; width: 100%; height: 100px; display: flex; justify-content: space-between; box-shadow: 6px 8px 30px 0px rgba(0, 0, 0, 0.06); border-radius: 50px; padding: 0 46px; } .ndtitles .ndtitle1{ display: flex; justify-content: flex-start; align-items: center; } .ndtitles .ndtitle1 img{ width: 30px; height: 30px; } .ndtitles .ndtitle2{ display: flex; justify-content: flex-start; align-items: center; /* float: right; */ } .ndtitles .ndtitle2 img{ width: 30px; height: 30px; } .ndlianxi{ background-image: url('../img/img47.png'); background-repeat: no-repeat; background-size: 100% 488px; height: 488px; margin-top: 58px; display: flex; justify-content: space-between; border-radius: 52px; box-shadow: 6px 8px 30px 0px rgba(0, 0, 0, 0.06); } .ndlianxi .left{ height: 488px; display: flex; flex-wrap: wrap; align-content: space-around; padding-left: 100px; } .ndlianxi .left .left1{ width: 100%; } .ndlianxi .left .left1 h1{ font-size: 40px; color: #333333; } .ndlianxi .left .left1 .p1{ margin-top: 15px; color: #999999; font-size: 24px; } .ndlianxi .left .left1 .p2{ display: flex; justify-content: flex-start; font-size: 16px; color: #999999; align-items: center; } .ndlianxi .left .left1 .p2 img{ width: 20px; height: 20px; margin-top: 13px; } .ndlianxi .left .left1 .p2 p{ margin-left: 10px; } .ndlianxi .left .left1 .p3{ margin-top: 20px; color: #333333; font-size: 36px; } .ndlianxi .right{ background-image: url('../img/img46.png'); background-repeat: no-repeat; background-size: 494px 100%; width: 494px; display: flex; align-content: center; flex-wrap: wrap; align-items: center; padding-left: 10%; } .ndlianxi .right .right1{ margin-top: 20px; width: 51%; height: 52px; border: 2px solid #FFFFFF; border-radius: 26px; display: flex; justify-content: center; text-align: center; line-height: 52px; color: #fff; align-items: center; } .ndlianxi .right .right1:nth-child(1){ margin-top: 0px; } .ndlianxi .right .right1 img{ width: 20px; height: 20px; margin-left: 10px; } @media screen and (max-width:1370px) { .ndlianxi{ display: flex; flex-direction: column; align-items: center; background-size:100% 286px; height: 286px; display: none; } .ndlianxi .left{ padding-left: 0; text-align: center; } .ndlianxi .left .left1 .p2{ justify-content: center; } .ndlianxi .right{ display: none; } } @media screen and (max-width: 768px) { .ndtitle .ndtitle2 a{ margin-right: 0; } .ndtitle,.ndtitle .ndtitle2{ display: flex; align-items: center; flex-direction: column; text-align: center; } .ndtitles{ height: 60px; } .ndtitle{ line-height: 0; padding: 10px 0; } .ndtitle .ndtitle2 p{ font-size: 14px; } .ndtitle .ndtitle2 div{ margin-right: 0; margin-top: 10px; } .ndtitle .ndtitle2 img{ width: 20px; height: 20px; } .detail{ position:static; padding-top: 20px; padding-bottom: 20px; top: 0; transform: translateX(0); } } /* 案例详情 */ .designbox{ margin: 5% 0 4% 0; } .designbox .top{ color: #333333; font-size: 36px; font-weight: bold; } .designbox .top span{ font-weight: 200; font-size: 24px; margin-left: 20px; } .designbox .center{ display: flex; justify-content: space-between; margin-top: 50px; } .designbox .center p{ width: 85%; color: #666666; font-size: 22px; line-height: 44px; } .designbox .center .desbtn{ display: flex; flex-direction: column; margin-left: 72px; } .designbox .center .desbtn .btn1{ padding: 0px 20px; min-width: 100px; height: 40px; line-height: 40px; text-align: center; background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 20px; color: #666666; } .designbox .center .desbtn .btn2{ padding: 0px 20px; min-width: 100px; height: 40px; line-height: 40px; text-align: center; background: #E95016; border-radius: 20px; color: #fff; margin-top: 20px; } .designbox .top1{ margin-top: 70px; color: #666666; font-size: 24px; } .designbox .foot{ margin-top: 50px; display: flex; flex-wrap: wrap; } .designbox .foot span{ margin-top: 10px; padding: 0px 20px; height: 38px; line-height: 38px; color: #666666; background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 19px; text-align: center; margin-right: 14px; } .desimg{ width: 100%; } .desimg img{ width: 100%; } .desnext{ margin: 80px 0; display: flex; align-items: center; flex-direction: column; } .desnext span{ width: 239px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 22px; background: #E95016; border-radius: 25px; margin-bottom: 43px; cursor: pointer; } .desnext .nextbox{ width: 100%; border-top: 1px solid #EEEEEE; display: flex; justify-content: space-between; color: #333333; font-size: 22px; padding-top: 38px; } .xgdes{ background: #F7F7F7; padding-top: 78px; padding-bottom: 100px; display: flex; flex-direction: column; } .xgdes .top{ display: flex; justify-content: space-between; align-items: flex-end; } .xgdes .top span{ font-size: 36px; color: #E95016; font-weight: bold; } .xgdes .top .xgml{ display: flex; justify-content: flex-start; } .xgdes .top .xgml li{ color: #999999; font-size: 14px; margin-right: 38px; cursor: pointer; text-align: center; } .xgdes .work_box1{ padding: 0; } @media screen and (max-width: 1240px) { .designbox .center p{ line-height: 30px; font-size: 16px; } .designbox .center{ margin-top: 25px; } .designbox .top1{ margin-top: 30px; } .designbox .foot{ display: flex; } .xgdes .top{ display: flex; flex-direction: column; align-items: center; } .xgdes .top .xgml{ margin-top: 30px; } } @media screen and (max-width: 768px) { .designbox .center{ display: flex; flex-direction: column; } .designbox .center p{ width: 100%; } .designbox .center .desbtn{ margin-top: 30px; margin-left: 0; display: flex; justify-content: space-between; } .designbox .foot{ margin-top: 20px; } .designbox .top{ font-size: 28px; } .designbox .top span{ font-size: 20px; } } .tanc{ z-index: 999; position: fixed; width: 100%; height: 100%; margin: 0; top: 0; left: 0; background:rgba(0, 0, 0, 0.5); /* display:none */ } .tanc .tancbox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /* min-width: 783px; */ width: 50%; background: #FFFFFF; border-radius: 10px; padding: 40px 0 ; } .tanc .tancbox .top{ display: flex; flex-direction: column; padding: 26px 10%; border-bottom: 1px solid #EEEEEE; } .tanc .tancbox .top h1{ font-size: 24px; color: #333333; text-align: center; } .tanc .tancbox .top p{ font-size: 14px; margin-top: 22px; text-align: center; color: #999999; } .tanc .tancbox .center{ display: flex; flex-direction: column; } .tanc .tancbox .center .sl1{ margin-top: 20px; display: flex; align-items: center; } .tanc .tancbox .center .sl1 span{ color: #333333; font-size: 14px; width: 35%; text-align: right; display: inline-block; } .tanc .tancbox .center .sl1 span i{ color: #E6433D; margin-right: 5px; } .tanc .tancbox .center .sl1 select{ width: 50%; height: 40px; background: #FFFFFF; border: 3px solid #E6433D; border-radius: 4px; padding-left: 20px; } .tanc .tancbox .center .sl1 input{ width: 50%; height: 40px; background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; padding-left: 20px; } .tanc .tancbox .center .sl1:last-child input{ width: 120px; height: 40px; background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; padding-left: 20px; } .tanc .tancbox .center .sl1 canvas{ margin-left: 20px; } .tanc .tancbox .foot{ margin-top: 20px; display: flex; justify-content: center; } .tanc .tancbox .foot .submit-btn1{ width: 120px; height: 40px; line-height: 40px; text-align: center; color: #fff; background: #E6433D; border-radius: 4px; cursor: pointer; } .tanc .tancbox .foot .submit-btn2{ width: 120px; height: 40px; line-height: 40px; text-align: center; color: #CCCCCC; border: 1px solid #CCCCCC; border-radius: 4px; margin-left: 18px; cursor: pointer; } .tishi{ margin-top: 30px; color: #999999; font-size: 14px; text-align: center; } .tishi span{ color: #E6433D; } @media screen and (max-width: 1024px) { .tanc .tancbox{ width: 50%; min-width: 360px; } .tanc .tancbox .top h1{ font-weight: bold; font-size: 16px; } .tanc .tancbox .top p{ font-size: 12px; } .tanc .tancbox .center .sl1{ margin-top: 10px; } .tanc .tancbox .center .sl1 canvas{ height: 30px; } .tanc .tancbox .top{ padding: 0 5% 10px; } .tanc .tancbox .center .sl1 input, .tanc .tancbox .center .sl1 select, .tanc .tancbox .center .sl1:last-child input{ font-size: 12px; height: 30px; } .tishi{ font-size: 12px; margin-top: 15px; } .bnnav{ display: none; } } @media screen and (max-width: 320px) { .tanc .tancbox{ width: 50%; min-width:300px; padding: 10px 0; } .tanc .tancbox .top h1{ font-size: 13px; } .tanc .tancbox .top p{ margin-top: 10px; } .tanc .tancbox .center .sl1 canvas{ margin-left: 2px; } .tanc .tancbox .foot .submit-btn1,.tanc .tancbox .foot .submit-btn2{ font-size: 14px; height: 34px; line-height: 34px; width: 88px; } .tanc .tancbox .center .sl1:last-child input{ width: 78px; } .tanc .tancbox .center .sl1 input, .tanc .tancbox .center .sl1 select, .tanc .tancbox .center .sl1:last-child input{ padding-left: 5px; } } .tanc{ opacity: 0; } @media screen and (max-width: 768px) { .ourintbox h1,.partner h1,.honnerbox h1,.advantage h1,.bar h3,.honor .fontl h1, .h5box1 h1,.deploy h1,.datum .left h1,.sales .right h1,.h5box1 h1 span, .deploy h1 span{ font-size: 22px; font-weight: bold; } .partner .t1{ font-size: 14px; } .ourintbox .int .image{ width: 140px; height: 140px; } .ourintbox .int,.ourintbox .int p{ margin-top: 20px; line-height: 24px; } .ourintbox .ournumber .ournumberli .message p span,.ourintbox .ournumber .ournumberli .message p{ font-size: 44px; } .honor .fontl p{ margin-top: 15px; } .new .newlist li .message h3{ font-size: 22px; } .new .newlist li .message p{ margin-top: 15px; line-height: 22px; } .new .newlist li .image{ height: 190px; } .new,.design{ padding: 30px 0 30px; } .worklist li .type1 img{ height: 200px; } .worklist .caseItem{ height: 230px; } .edubanner .box h1{ font-size: 26px; } .bar .t1,.bar .t2{ display: none; } .h5box1 ul li .t2{ font-size: 12px; } .h5box1 ul li .t1{ font-size: 22px; } .slogan1 .image img{ width: 150px; height: 150px; } .slogan1{ margin: 30px 0; } .slogan1 p{ font-size: 12px; } .slogan{ margin-bottom: 0; } .applet{ padding: 30px 5%; } .havebox .have ul li .haveli{ padding: 20px 5% 20px; } .havebox .have ul li .haveli .t1,.havebox .have ul li .haveli .t2{ margin-top: 15px; } }